<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <!-- 引用模板 Header -->
    <div th:insert="bg/publicHead :: publicHead(${pageName})"></div>
    <!-- [ Header ] end -->

    <link rel="stylesheet" href="/css/base.css" type="text/css" />
    <script src="/js/jquery-1.9.1.min.js" type="text/javascript"></script>
    <script src="/js/sweetalert.min.js" type="text/javascript" charset="UTF-8"></script>
    <script src="/js/stroage.js" type="text/javascript" charset="UTF-8"></script>
    <script src="/js/comm.js" type="text/javascript" charset="UTF-8"></script>

    <script th:inline="javascript">
        window.onerror=function(){return true;};
        var ServerIP=[(${ServerIP!=null?'"'+ServerIP+'"':'"'+'"'})];
        var products=[(${(products!=null && products!='')?products:'null'})]; //产品数据
        //主类备份
        //var backupData=[(${backupData!=null?'"'+backupData+'"':'"'+'"'})];
        //分类
        var firstId=null;
        var firstValue=null;
        var secondId=null;
        var secondValue=null;
        var thirdId=null;
        var thirdValue=null;
        //记录组件状态名称
        var components=[
            "productsNo",
            "productstitle",
            "productsvideo",
            "productstag",
            "productssell",
            "productsstore",
            "productsdesc",
            "productoriginprice",
            "productsdiscountprice",
            "productsfactory",
            "productscontent"
        ];
        var uploadTime=1500; //上传图片间隔
        var productNo=null;
        var curUploadImageUrl=null;
        var maxFileSize=500; //KB
        var filesList=[];
        var fileIndex=1;
        var callBackimageList=[];
        var callBackimageList_backup=[];
        var errorMessage="";
        var isUpdate=false;
        $(document).ready(function() {

            //初始化数据
            $(".selectUpload").css("display","block");
            $(".uploadedimg").css("display","none");


            //保存input组件输入状态
            var storeInput=(arg)=>{
                for (let i = 0; i < arg.length; i++) {
                    $("."+arg[i]).blur(function(){
                        myStorage.setItem(arg[i],$(this).val());
                    });
                }
            }
            var restoreInput=(arg)=>{
                for (let i = 0; i < arg.length; i++) {
                    $("."+arg[i]).val(myStorage.getItem(arg[i]));
                }
            }
            var removestoreInput=(arg)=>{
                for (let i = 0; i < arg.length; i++) {
                    myStorage.removeItem(arg[i]);
                    $("."+arg[i]).val("");
                }
            }

            //还原组件状态
            restoreInput(components);

            //注册侦听组件输入状态
            storeInput(components);

            //渲染图片
            var renderImageList=(flag)=>{
                for (var i = 0; i < callBackimageList.length; i++) {
                    $(".uploadedListimg").append("<div class='imgdiv'><a href='"+callBackimageList[i]+"' target='_blank'><img src='"+callBackimageList[i]+"' /></a><span index='"+i+"'>x</span></div>")
                    if(flag==true){ callBackimageList.pop();} //移除最后1个元素
                }
            }

            //发布成功清除所有缓存
            var clearAllStores=(flag)=>{
                removestoreInput(components);
                myStorage.removeItem("firstId");
                myStorage.removeItem("firstValue");
                myStorage.removeItem("secondId");
                myStorage.removeItem("secondValue");
                myStorage.removeItem("thirdId");
                myStorage.removeItem("thirdValue");
                myStorage.removeItem("editorHtml");
                myStorage.removeItem("curUploadImageUrl");
                myStorage.removeItem("callBackimageList");
                firstId=null;
                firstValue=null;
                secondId=null;
                secondValue=null;
                thirdId=null;
                thirdValue=null;
                productNo=null;
                curUploadImageUrl=null;
                filesList=[];
                fileIndex=1;
                callBackimageList=[];
                callBackimageList_backup=[];
                errorMessage="";
                if(flag==true){
                    window.location.href=window.location.href;
                }
            }



            //读取数据到编辑器
            if(products!=null){
                isUpdate=true
                $(".h4").text("更新产品");
                $(".addBtn").text("更新");
                $(".resetBtn").css("visibility","hidden");
                //先清空一次所有缓存
                clearAllStores(false);
                console.log("产品数据:",products);
                //1
                firstId=products.firstid;
                firstValue=products.maintype;
                $("#firstClass").append("<option value='"+firstId+"' selected='selected'>"+firstValue+"</option>");
                //2
                secondId=products.secondid;
                secondValue=products.subtype;
                $("#secondClassSelect").append("<option value='"+secondId+"' selected='selected'>"+secondValue+"</option>");
                //3
                thirdId=products.thirdid
                thirdValue=products.classtype;
                $("#thirdClassSelect").append("<option value='"+thirdId+"' selected='selected'>"+thirdValue+"</option>");
                //产品编号
                productNo=products.productno;
                $(".productsNo").val(productNo);
                //封面图
                curUploadImageUrl=products.productimg;
                $(".uploadedimg").css("display","block");
                $(".uploadedimg img").attr("src",curUploadImageUrl); //显示刚刚上传成功的图片
                //详情图
                if(products.productdetailsimg!=null && products.productdetailsimg!=''){
                    callBackimageList=JSON.parse(products.productdetailsimg);
                    callBackimageList_backup=callBackimageList;
                    //渲染图片
                    renderImageList(false);
                    //显示渲染图片列表
                    $(".uploadedListimg").css("display","flex");
                }
                //产品标题
                $(".productstitle").val(products.productname);
                //产品简介
                $(".productsdesc").val(products.productdesc);
                //产品视频
                $(".productsvideo").val(products.productvideourl);
                //产品标签
                $(".productstag").val(products.ptags);
                //产品价格
                $(".productoriginprice").val(products.productprice);
                //产品折扣价
                $(".productsdiscountprice").val(products.productdiscountprice);
                //产品库存
                $(".productsstore").val(products.productstore);
                //产品销量
                $(".productssell").val(products.productselled);
                //厂家
                $(".productsfactory").val(products.productfactory);
                //产品参数
                editor.setHtml(products.productparas);
            }





            //还原select组件状态
            var restoreSelectInput=()=>{
                    if(isUpdate==false){
                        if(myStorage.getItem("firstId")!=null){
                            firstId=myStorage.getItem("firstId");
                        }
                        if(myStorage.getItem("firstValue")!=null){
                            firstValue=myStorage.getItem("firstValue");
                            //$("#firstClass").empty();
                            $("#firstClass").append("<option value='"+firstId+"' selected='selected'>"+firstValue+"</option>");
                        }
                        if(myStorage.getItem("secondId")!=null){
                            secondId=myStorage.getItem("secondId");
                        }
                        if(myStorage.getItem("secondValue")!=null){
                            secondValue=myStorage.getItem("secondValue");
                            $("#secondClassSelect").append("<option value='"+secondId+"' selected='selected'>"+secondValue+"</option>");
                        }
                        if(myStorage.getItem("thirdId")!=null){
                            thirdId=myStorage.getItem("thirdId");
                        }
                        if(myStorage.getItem("thirdValue")!=null){
                            thirdValue=myStorage.getItem("thirdValue");
                            $("#thirdClassSelect").append("<option value='"+thirdId+"' selected='selected'>"+thirdValue+"</option>");
                        }
                        //还原封面图
                        if(myStorage.getItem("curUploadImageUrl")!=null && myStorage.getItem("curUploadImageUrl")!=""){
                            curUploadImageUrl=myStorage.getItem("curUploadImageUrl");
                            $(".uploadedimg").css("display","block");
                            $(".uploadedimg img").attr("src",curUploadImageUrl); //显示刚刚上传成功的图片
                        }
                        //还原图片详情
                        if(myStorage.getItem("callBackimageList")!=null && myStorage.getItem("callBackimageList")!=""){
                            callBackimageList=myStorage.getItem("callBackimageList").split(",") || [];
                            $(".uploadedListimg").css("display","flex");
                            renderImageList(false); //渲染组件
                        }
                        //还原编辑器内容(产品参数)
                        if(myStorage.getItem("editorHtml")){
                            var html=myStorage.getItem("editorHtml");
                            editor.setHtml(html);
                        }
                    } //isUpdate End
            }
            restoreSelectInput();




            var checkProductNo=function(targetObj){
                var reg = /[\u4E00-\u9FA5]|[\uFE30-\uFFA0]/g;
                productNo=$(".productsNo").val();
                if (reg.test(productNo)){
                    myStorage.setItem("productsNo","");
                    swal("产品编号/型号只能输英文或数字", "请输入英文或数字", "error");
                    if(targetObj!=null){targetObj.val("")};
                    return false;
                }
                productNo=clearSpecialSymbol(productNo);  //过滤输入编号特殊字符
                if(/\S/.test(productNo)===false || productNo===null){
                    myStorage.setItem("productsNo","");
                    swal("请输入产品编号", "尚未输入产品编号", "error");
                    if(targetObj!=null){targetObj.val("")};
                    return false;
                }
                return true;
            }


            var checkImageSize=(targetObj,curFile,flag)=>{
                console.log("当前检查文件",curFile,"文件大小:",curFile.size)
                if((curFile.size/1000)>maxFileSize){
                    targetObj.val("");
                    if(flag==true){
                        swal("上传失败！图片不能大于"+maxFileSize+"KB", "请压缩后上传", "error");
                    }
                    return false;
                }
                return true;
            }

            $(".productsNo").blur(function(){
                checkProductNo(null);
            });


            //封面图上传
            $("#uploadPhotoFile").change(async function(){
                if(checkProductNo($(this))===false){
                    return;
                }
                var file = this.files[0];
                //检测文件大小
                if(checkImageSize($(this),file,true)===false){
                    return;
                }
                var formData = new FormData();
                formData.append("multipartFile",file);
                //console.log("准备上传参数信息:",formData,formData.forEach(value => console.log(value)))
                var res=await SyncAjaxRequest(ServerIP+'api/OssUploadImage',formData,productNo);
                console.log("文件上传结果===>:",res);
                if(res.code===200){
                    curUploadImageUrl=res.result;
                    myStorage.setItem("curUploadImageUrl",curUploadImageUrl); //设置缓存
                    console.log("图片地址",curUploadImageUrl)
                    $(".uploadedimg img").attr("src",curUploadImageUrl); //显示刚刚上传成功的图片
                    $(this).val(""); //重置组件状态
                    swal("图片上传成功", "图片已上传", "success");
                    $(".selectUpload").css("display","none");
                    $(".uploadedimg").css("display","block");
                }else{
                    console.log("图片上传失败:",res.result); //失败原因
                    if(res.result!=null && res.result.indexOf("Prefix string too short")!=-1){
                        alert("图片名称太短 上传失败");
                    }else{
                        alert(res.msg);
                    }
                    curUploadImageUrl="";
                    myStorage.removeItem("curUploadImageUrl"); //清除缓存
                    $(".selectUpload").css("display","block");
                    $(".uploadedimg").css("display","none");
                }
            });





            //多图上传
            $("#uploadDetailPhoto").change(function(e){
                if(checkProductNo($(this))===false){
                    return;
                }

                //显示渲染图片列表
                $(".uploadedListimg").css("display","flex");

                //console.log(e);
                //console.log("多图上传",this.files[0]);
                //存入一个图片数组里
                for (let i = 0; i <this.files.length ; i++) {
                    filesList.push(this.files[i]);
                }
                //console.log("文件数组",filesList);

                var ProcessFiles=async ()=>{
                    if(filesList.length>0){
                        $(".showLoading").text("正在上传第【"+fileIndex+"】张图片...").css("display","block");
                        var file=filesList.shift();
                        //检测文件大小
                        if(checkImageSize($(this),file,false)===false){
                            //记录过大图片
                            errorMessage+=file.name+" 图片过大,未能上传"+'\<br\>';
                            ProcessFiles();//递归调用
                            return;
                        }
                        //console.log("数组出栈",file);
                        var formData = new FormData();
                        formData.append("multipartFile",file);
                        //console.log("准备上传参数信息:",formData,formData.forEach(value => console.log(value)))
                        var res=await SyncAjaxRequest(ServerIP+'api/OssUploadImage',formData,productNo);
                        //console.log("文件上传结果===>:",res);
                        if(res.code===200){
                            callBackimageList.push(res.result); //保存返回的图片地址
                            callBackimageList_backup.push(res.result);
                            renderImageList(true); //渲染图片地址
                            console.log("图片"+fileIndex+"上传成功");
                            fileIndex++;
                            if(filesList.length<=0){
                                swal("图片上传成功", (fileIndex-1)+"张图片已上传", "success");
                                $(this).val(""); //重置组件状态
                                fileIndex=1;
                                $(".showLoading").css("display","none");
                                $(".errorMessage").html(errorMessage).css("display","block"); //显示错误信息
                                console.log("已上传图片",callBackimageList);
                                myStorage.setItem("callBackimageList",callBackimageList_backup);
                                return;
                            }
                            //myStorage.setItem("curUploadImageUrl",curUploadImageUrl); //设置缓存
                            setTimeout(()=>{
                                ProcessFiles();//递归调用
                            },uploadTime);
                        }else{
                            console.log("图片上传失败:",res.result); //失败原因
                            swal("图片上传失败", res.result, "error");
                        }
                    }else{
                        swal("图片上传成功", (fileIndex-1)+"张图片已上传", "success");
                        fileIndex=1;
                        $(".showLoading").css("display","none");
                        $(".errorMessage").html(errorMessage); //显示错误信息
                        myStorage.setItem("callBackimageList",callBackimageList);
                    }
                }
                ProcessFiles(); //调用一次
                /*for (let i = 0; i <this.files.length ; i++) {
                    //console.log("文件==>",this.files[i]);
                    var file = this.files[i];
                    var formData = new FormData();
                    formData.append("multipartFile",file);
                    //console.log("准备上传参数信息:",formData,formData.forEach(value => console.log(value)))
                    var res=await SyncAjaxRequest(ServerIP+'api/OssUploadImage',formData,productNo);
                    console.log("文件上传结果===>:",res);
                    if(res.code===200){

                        //myStorage.setItem("curUploadImageUrl",curUploadImageUrl); //设置缓存

                    }else{
                        console.log("图片上传失败:",res.result); //失败原因
                        swal("图片上传失败", res.result, "error");
                    }
                }*/
            });



            //主类选择
            $("#firstClass").change(async function(){
                var targetObj=$(this).find("option:selected");
                firstId=targetObj.val();
                firstValue=targetObj.text();
                console.log("下拉选择",firstId,firstValue);
                //保存选择状态
                myStorage.setItem("firstId",firstId);
                myStorage.setItem("firstValue",firstValue);

                //查询二级分类
                var addData={
                    id:firstId,
                    firstclass:firstValue,
                };
                var res=await SyncJson("/api/getSecondClass",addData);
                console.log("查询二级分类",res);
                secondId=null;
                secondValue=null;
                thirdId=null;
                thirdValue=null;
                $("#secondClassSelect").empty();
                $("#thirdClassSelect").empty();
                $("#thirdClassSelect").append("<option value='-1' selected='selected'>选择</option>");
                myStorage.removeItem("secondId");
                myStorage.removeItem("secondValue");
                myStorage.removeItem("thirdId");
                myStorage.removeItem("thirdValue");

                if(res.code===200){
                    $("#secondClassSelect").append("<option value='0' selected='selected'>选择</option>");
                    if(res.result.length>0){
                        for (var i = 0; i < res.result.length; i++) {
                            console.log(res.result[i].secondclass);
                            $("#secondClassSelect").append("<option value='"+res.result[i].id+"'>"+res.result[i].secondclass+"</option>");
                        }
                    }else{
                        $("#secondClassSelect").empty();
                        $("#secondClassSelect").append("<option value='-1' selected='selected'>暂无分类</option>");
                    }
                }
            });


            //二级分类选择
            $("#secondClassSelect").change(async function(){
                var targetObj=$(this).find("option:selected");
                secondId=targetObj.val();
                secondValue=targetObj.text();
                console.log("下拉选择",firstId,firstValue);
                //保存选择状态
                myStorage.setItem("secondId",secondId);
                myStorage.setItem("secondValue",secondValue);

                //查询三级分类
                var addData={
                    firstid:firstId,
                    secondid:secondId
                };
                var res=await SyncJson("/api/getThirdClass",addData);
                console.log("查询三级分类",res);
                $("#thirdClassSelect").empty();
                if(res.code===200){
                    $("#thirdClassSelect").append("<option value='0' selected='selected'>选择</option>");
                    if(res.result.length>0){
                        for (var i = 0; i < res.result.length; i++) {
                            console.log(res.result[i].thirdclass);
                            $("#thirdClassSelect").append("<option value='"+res.result[i].id+"'>"+res.result[i].thirdclass+"</option>");
                        }
                    }else{
                        $("#thirdClassSelect").empty();
                        $("#thirdClassSelect").append("<option value='-1' selected='selected'>暂无分类</option>");
                    }
                }
            });


            //三级分类选择
            $("#thirdClassSelect").change(function(){
                thirdId=$(this).find("option:selected").val();
                thirdValue=$(this).find("option:selected").text();
                //保存状态
                myStorage.setItem("thirdId",thirdId);
                myStorage.setItem("thirdValue",thirdValue);
                console.log("三级类目",thirdValue)
            });



            //详情图点击事件
            $(".imgdiv span").click(function(){
                var index=$(this).attr("index");
                if(confirm("是否删除图片")){
                    //alert(index+"图片已删除");
                    callBackimageList.splice(index,1);
                    callBackimageList_backup.splice(index,1);
                    myStorage.setItem("callBackimageList",callBackimageList_backup); //更新缓存
                    $(".imgdiv:eq("+index+")").remove();
                    //console.log("详情图数据",callBackimageList_backup)
                }
            });



            //发布&更新
            $(".addBtn").click(async function(){
                if(/\S/.test(firstValue)===false || firstId===null){
                    swal("请选择行业大纲类", "行业大纲类未选择", "error");
                    return;
                }
                if(/\S/.test(secondValue)===false || secondId===null){
                    swal("请选择行业分类", "行业分类未选择", "error");
                    return;
                }
                if(/\S/.test(thirdValue)===false || thirdId===null){
                    swal("请选择产品类", "产品分类未选择", "error");
                    return;
                }
                if(checkProductNo()===false){
                    return;
                }
                if(curUploadImageUrl===null){
                    swal("请上传封面图", "至少上传一张产品封面图", "error");
                    return;
                }

                var title=$(".productstitle").val();
                var desc=$(".productsdesc").val();
                var videourl=$(".productsvideo").val();
                var price=$(".productoriginprice").val();
                var discount=$(".productsdiscountprice").val();
                var productsfactory=$(".productsfactory").val();
                var productsstore=$(".productsstore").val();
                var sellnum=$(".productssell").val();
                var productstag=$(".productstag").val();
                var content= editor.getHtml();
                console.log("产品内容",content);

                if(/\S/.test(title)===false){
                    swal("请输入产品标题", "产品标题未设置", "error");
                    return;
                }
                if(/\S/.test(desc)===false){
                    swal("请输入产品简介", "产品简介未设置", "error");
                    return;
                }
                if(/\S/.test(price)===false){
                    swal("请输入产品价格", "请设置产品价格", "error");
                    return;
                }
                if(/^\d+$/.test(price)===false){
                    swal("原价为数字", "请输入数字", "error");
                    return;
                }
                if(/\S/.test(discount)===false){
                    swal("请输入产品折扣价", "请设置产品折扣价", "error");
                    return;
                }
                if(/^\d+$/.test(discount)===false){
                    swal("折扣价为数字", "请输入数字", "error");
                    return;
                }
                if(/\S/.test(sellnum)===false){
                    swal("请输入已售数量", "请设置已售数量", "error");
                    return;
                }
                if(/^\d+$/.test(sellnum)===false){
                    swal("已售数量为数字", "请输入数字", "error");
                    return;
                }
                if(/\S/.test(productsstore)===false){
                    swal("请输入产品库存", "请设置产品库存", "error");
                    return;
                }
                if(/^\d+$/.test(productsstore)===false){
                    swal("产品库存为数字", "请输入数字", "error");
                    return;
                }
                if(/\S/.test(content.replace("<p><br></p>",""))===false){
                    swal("请输入产品参数", "产品参数不能为空", "error");
                    return;
                }
                if (confirm("是否发布产品?")) {
                    var addData={
                        firstid:firstId,
                        maintype:firstValue,
                        secondid:secondId,
                        subtype:secondValue,
                        thirdid:thirdId,
                        classtype:thirdValue,
                        productno:productNo,
                        productvideourl:$.trim(videourl),
                        productimg:curUploadImageUrl,
                        productdetailsimg:JSON.stringify(callBackimageList_backup), //产品详情图 -- 将数组转换成字符串
                        productname:$.trim(title),
                        productdesc:$.trim(desc),
                        productprice:$.trim(price),
                        productdiscountprice:$.trim(discount),
                        productstore:$.trim(productsstore),
                        productselled:$.trim(sellnum),
                        productfactory:$.trim(productsfactory)===''?'自营':$.trim(productsfactory),
                        productparas:$.trim(content),
                        ptags:$.trim(productstag)
                    };
                    if(isUpdate==true) addData.id=products.id; //追加更新字段
                    console.log("上传参数:",addData);
                    //return;

                    if(addData!=null){
                        var apiUrl=null;
                        if(isUpdate==false){
                            apiUrl="/api/addproducts";
                        }else{ //更新模式
                            apiUrl="/api/updateProducts";
                        }
                        if(apiUrl==null){
                            alert("apiUrl不能为空");
                            return;
                        }
                        var res=await SyncJson(apiUrl,addData);
                        if(res.code===200){
                            if(isUpdate==false) {
                                alert("产品发布成功");
                            }else{
                                alert("商品更新成功");
                            }
                            removestoreInput(components); //历史记录值
                            callBackimageList=[]; //清空显示图片的数组
                            clearAllStores(true); //清空所有缓存
                        }
                    }
                }
            });




            //重置
            $(".resetBtn").click(function(){
                if (confirm("是否清空重置?")) {
                    clearAllStores(true);
                }
            });

        }); //document.ready End


    </script>
</head>

<!-- background:url('/bgTemplate/image/body-bg-7.jpg'); -->
<body class="bodybg">
<!-- [ Main Content ] start -->
<div class="contain">
    <h4 class="h4">发布产品</h4>
    <div class="doctors">
        <div class="tables">
            <div class="text"><span>*</span> 行业大纲类:</div>
            <div class="input">
                <select id="firstClass" class="form-control">
                    <option value="选择主类" selected="">选择</option>
                    <!-- 更新时显示 -->
                    <option th:if="${FirstType != null}" th:each="item:${FirstType}" th:value="${item.id}" th:text="${item.firstclass}"></option>
                </select>
            </div>
        </div>
        <div class="tables">
            <div class="text"><span>*</span> 行业分类:</div>
            <div class="input">
                <select id="secondClassSelect" class="form-control">
                    <option selected="selected">选择</option>
                </select>
            </div>
        </div>
        <div class="tables">
            <div class="text"><span>*</span> 产品类:</div>
            <div class="input">
                <select id="thirdClassSelect" class="form-control">
                    <option selected="selected">选择</option>
                </select>
            </div>
        </div>
        <div class="tables">
            <div class="text"><span>*</span> 编号/型号:</div>
            <div class="input"><input type="text" class="productsNo" placeholder="先输产品编号,再上传图片" style="width:200px;"></div>
        </div>
        <div class="tables">
            <div class="text"><span>*</span> 封面图:</div>
            <div style="display:block;">
                <div class="input uploadedimg" style="display:none;"><img src="" /></div>
                <div class="input selectUpload" style="margin-top:5px;"> <input id="uploadPhotoFile" type="file" accept="image/*"  /></div>
            </div>
        </div>
        <div class="tables">
            <div class="text"><span>*</span> 详情图:</div>
            <div class="input selectDetailUpload"> <input id="uploadDetailPhoto" type="file" accept="image/*" multiple /></div>
        </div>
        <div class="uploadedListimg" style="display:none;">
            <!--<div><img src='http://localhost/images/productimgs/333/1ad718fe-d580-4e75-b62e-4601a2f782c4.png' /></div>
            <div><img src='http://localhost/images/productimgs/333/1ad718fe-d580-4e75-b62e-4601a2f782c4.png' /></div>
            <div><img src='http://localhost/images/productimgs/333/1ad718fe-d580-4e75-b62e-4601a2f782c4.png' /></div>-->
        </div>
        <div class="errorMessage" style="display:none"></div>
        <div class="tables">
            <div class="text"></div>
            <div class="showLoading"></div>
        </div>
        <div class="tables">
            <div class="text"><span>*</span> 产品标题:</div>
            <div class="input"><input type="text" class="productstitle"></div>
        </div>
        <div class="tables">
            <div class="text"><span>*</span> 产品简介:</div>
            <div class="input"><input type="text" class="productsdesc" maxlength="150" placeholder="产品简介150字内"></div>
        </div>
        <div class="tables">
            <div class="text">产品视频:</div>
            <div class="input"><input type="text" class="productsvideo" placeholder="产品网络视频地址 http://www.????.com/xxx.mp4"></div>
        </div>
        <div class="tables">
            <div class="text">标签:</div>
            <div class="input"><input type="text" class="productstag" placeholder="多个标签用逗号，分割 如:电器,五金"></div>
        </div>
        <div class="tables">
            <div class="text"><span>*</span> 原价:</div>
            <div class="input"><input type="text" class="productoriginprice" value="0"></div>
        </div>
        <div class="tables">
            <div class="text"><span>*</span> 折扣价:</div>
            <div class="input"><input type="text" class="productsdiscountprice" value="0"></div>
        </div>
        <div class="tables">
            <div class="text"><span>*</span> 已售:</div>
            <div class="input"><input type="text" class="productssell" value="0"></div>
        </div>
        <div class="tables">
            <div class="text"><span>*</span> 库存量:</div>
            <div class="input"><input type="text" class="productsstore" value="10"></div>
        </div>
        <div class="tables">
            <div class="text">厂家名称:</div>
            <div class="input"><input type="text" class="productsfactory" value="自营"></div>
        </div>
        <div class="tables">
            <div class="text"><span>*</span> 产品参数:</div>
            <div class="input">
                <!--<textarea class="productscontent" style="width:500px; height:200px;"></textarea>-->
            </div>
        </div>
        <div id="editor—wrapper">
            <div id="toolbar-container"><!-- 工具栏 --></div>
            <div id="editor-container"><!-- 编辑器 --></div>
        </div>
        <div class="tables" style="border-bottom:0px; margin-top:20px;">
            <div class="text sbtn">
                <a class="addBtn">发布</a>
                <a class="resetBtn">重置</a>
            </div>
            <div class="input"></div>
        </div>
    </div>
</div>
<!--中间 End -->
</body>

<!-- **************** WangEditor **************** -->
<!-- 引入 css -->
<!-- /wangEditor/style.css -->
<!-- https://unpkg.com/@wangeditor/editor@latest/dist/css/style.css -->
<link href="/wangEditor/style.css" rel="stylesheet">
<!--<link href="/wangEditor/style.css" rel="stylesheet">-->
<style>
    #editor—wrapper {
        border: 1px solid #ccc;
        z-index: 100; /* 按需定义 */
    }
    #toolbar-container { border-bottom: 1px solid #ccc; }
    #editor-container { height: 500px; }

    #editor—wrapper2 {
        border: 1px solid #ccc;
        z-index: 100; /* 按需定义 */
    }
    #toolbar-container2 { border-bottom: 1px solid #ccc; }
    #editor-container2{ height: 150px; }
</style>
<!-- 引入 js -->
<!-- https://unpkg.com/@wangeditor/editor@latest/dist/index.js -->
<!-- /wangEditor/index.js -->
<script src="/wangEditor/index.js "></script>
<!--<script src=" /wangEditor/index.js"></script>-->
<script th:inline="javascript">
    var ServerIP=[(${ServerIP!=null?'"'+ServerIP+'"':'"'+'"'})];
    const { createEditor, createToolbar } = window.wangEditor
    const editorConfig = {
        placeholder: '<p>产品型号:华为P50</p><p>产品尺寸:35*52*56mm</p><p>产品材质:ABS</p>',
        MENU_CONF:{
            'uploadImage':{
                server: ServerIP+'api/wangEditorUploadImage',
                headers: {
                    'token':myStorage.getItem("token"),
                    'productNo':myStorage.getItem("productsNo")
                },
                fieldName: 'multipartFile',
                // 单个文件的最大体积限制，默认为 2M
                maxFileSize: 0.5 * 1024 * 1024, // 1M / 0.5=500kb  0.05=50kb
                onBeforeUpload(file){
                    //console.log(("上传文件之前"+file.size()))
                    //alert("上传文件之前");
                    return file;
                },
                onSuccess(file,res) {          // JS 语法
                    console.log(`${file.name} 上传成功`, res)
                },
                onError(file, err, res) {               // JS 语法
                    console.log(err);
                    if(err.toString().indexOf("exceeds maximum allowed size")!=-1){
                        alert("上传失败！图片大小已超标500KB");
                    }
                    //console.log(`${file.name} 上传出错`, err, res)
                }
            }
        },
        onChange(editor) {
            const html = editor.getHtml()
            console.log('编辑器默认内容editor content', html)
            // 也可以同步到 <textarea>
        },
        onBlur(editor){
            const html = editor.getHtml()
            console.log('鼠标离开了编辑器')
            //保存当前状态
            myStorage.setItem("editorHtml",html);
        }
    }
    const editor = createEditor({
        selector: '#editor-container',
        html: "<p><br></p>",
        config: editorConfig,
        mode: 'default', // or 'simple'
    })
    //打印编辑器配置
    console.log("获取上传菜单配置",editor.getMenuConfig('uploadImage'));


    const toolbarConfig = {
        excludeKeys:[ //排除工具 , 先查看 toolbar.getConfig().toolbarKeys 配置获取对应的keys排除
            'group-video',
            'emotion',
        ]
    }
    const toolbar = createToolbar({
        editor,
        selector: '#toolbar-container',
        config: toolbarConfig,
        mode: 'default', // or 'simple'
    })






    //第二个编辑器，产品参数编辑器
    /*const editor2 = createEditor({
        selector: '#editor-container2',
        config: {
            placeholder: 'Type here...',
            autoFocus: false,
            MENU_CONF: {
                uploadImage: {
                    fieldName: 'your-file-name2',
                    base64LimitSize: 10 * 1024 * 1024 // 10M 以下插入 base64
                }
            },
            onChange(editor) {
                const html = editor.getHtml()
                console.log('鼠标离开了编辑器2',html)
                //保存当前状态
                myStorage.setItem("editorProductParas",html);
            }
        },
        html: '<p>产品参数编辑器</p><p><br></p>',
        mode: 'simple'
    })
    const toolbarConfig2 = {
        excludeKeys:[ //排除工具 , 先查看 toolbar2.getConfig().toolbarKeys 配置获取对应的keys排除
            'group-image',
            'group-video',
            'emotion',
            'todo',
            'codeBlock',
        ]
    }
    const toolbar2 = createToolbar({
        editor: editor2,
        selector: '#toolbar-container2',
        config: toolbarConfig2
    })
    console.log("获取编辑器2工具栏配置",toolbar2.getConfig().toolbarKeys);*/


</script>
<!-- **************** WangEditor **************** -->

</html>